<template>
	<view>

		<view class="active">
			<view class="imgbox">
				<image src="../../static/login.png" mode=""></image>
			</view>
			<view class="textbox">
				<view class="top">
					<text>首次登录，需获取手机号</text>
				</view>
				<view class="bottom">
					<text>绑定后无法解绑，请勿绑定他人手机， 尽可能授权微信绑定的手机号</text>
				</view>
			</view>
		</view>
		<view class="btnbottom">
			<button class="btnbox" v-if="isLogin  && userInfo.mobile_status==0" open-type="getPhoneNumber"
				@getphonenumber="getPhoneNumber">绑定手机号</button>
			<button class="btnbox" v-if="!isLogin" @tap="getUserProfile">
				申请微信授权
			</button>
			<view class="textbottom">
				<text>获取并绑定后下次即可直接登录</text>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutation,
		mapActions
	} from 'vuex';
	export default {
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo,
				isLogin: state => state.user.isLogin
			})
		},
		data() {
			return {

			}
		},
		methods: {
			getPhoneNumber(e) {

				if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {
					uni.showModal({
						title: '授权提醒',
						content: '有部分重要功能需要您的手机号，请再次点击授权！',
						showCancel: false,
						cancelText: '',
						confirmText: '确认',
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				} else {
					//保存手机号的接口
					this.$store
						.dispatch('getphonenum', {
							session_key: this.userInfo.session_key,
							token: this.userInfo.token,
							encryptedData: e.detail.encryptedData,
							iv: e.detail.iv,
							open_id: this.userInfo.openid
						})
						.then(res => {
							uni.showToast({
								title: '获取成功',
								icon: "none"
							})
						});

					if (this.userInfo.if_bangd == 0) {
						uni.navigateTo({
							url: "../../pagesA/loginkong/loginkong"
						})
					} else {
						uni.switchTab({
							url: '../index/index'
						})
					}
				}
			},
			getUserProfile(e) {
				// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
				// 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
				wx.getUserProfile({
					desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success: (res) => {

						// 调用登录接口
						this.showcode(res.iv, res.encryptedData)
					},
					fail: () => {
						uni.showModal({
							title: '授权提醒',
							content: '使用微信第三方登录必须允许微信权限，请再次点击重新授权',
							showCancel: false,
							cancelText: '',
							confirmText: '确认',
							success: res => {
								uni.switchTab({
									url: '../index/index'
								})
								
							},
							fail: () => {},
							complete: () => {}
						});
					}
				})
			},
			showcode(iv, encryptedData) { //微信登录的接口
				this.$store
					.dispatch('apiThirdLogin', {
						code: this.code,
						encryptedData: encryptedData,
						iv: iv
					})
					.then(res => {

						if (res.data.code == 1) {
							//mobile_status==1，手机号已绑定
							if (this.userInfo.mobile_status == 1) {
								//if_bangd=0，没有身份，去跳转空页面
								if (this.userInfo.if_bangd == 0) {
									uni.navigateTo({
										url: "../../pagesA/loginkong/loginkong"
									})
								} else {
									//根据不同身份去展示不同页面
									if (this.userInfo.user_status == "jiaoshi") { //教师
										uni.removeStorageSync("def")
										uni.setStorageSync("def", 1)
										uni.switchTab({
											url: '../index/index'
										})
									} else if (this.userInfo.user_status == "jiazhang") { //家长
									
										uni.removeStorageSync("def")
										uni.setStorageSync("def", 0)
										
										console.log(uni.getStorageSync("def"))
										
										uni.switchTab({
											url: '../index/index'
										})
									}else if (this.userInfo.user_status == "edu_admin") { //教育局
									
										uni.removeStorageSync("def")
										uni.setStorageSync("def", 2)
										
										console.log(uni.getStorageSync("def"))
										
										uni.switchTab({
											url: '../index/index'
										})
									} else { // 两种身份		
										uni.switchTab({
											url: '../index/index'
										})
									}

								}
							}
							uni.showToast({
								title: res.data.msg,
								icon: "none",
							})

						} else {
							uni.showToast({
								title: '登录失败',
								icon: "none"
							})
						}
					});

			},
		},
		onLoad() {
			this.$store
				.dispatch('loginByWexin')
				.then(res => {
					this.code = res

				});
		}

	}
</script>

<style lang="less">
	body {
		// background-color: #0998f6;
	}

	.active {
		margin-top: 350rpx;
		padding: 0 50rpx;
		display: flex;

		.imgbox {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 180rpx;

			// height: 150rpx;
			image {
				width: 180rpx;
				height: 180rpx;
			}
		}

		.textbox {
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			align-items: center;

			.top {
				text-align: center;
				font-size: 38rpx;
				font-weight: bold;
				color: #000;
			}

			.bottom {
				margin-top: 20rpx;
				// text-align: center;
				font-size: 34rpx;
				color: #000;
			}

		}
	}

	.btnbottom {
		position: fixed;
		bottom: 160rpx;
		width: 100%;
		padding: 50rpx;
		box-sizing: border-box;

		.btnbox {
			width: 100%;
			height: 110rpx;
			border-radius: 55rpx;
			background-color: #0998f6;
			color: #fff;
			font-size: 40rpx;
			text-align: center;
			line-height: 110rpx;
		}

		.textbottom {
			text-align: center;
			color: #999;
			font-size: 30rpx;
			margin-top: 20rpx;
		}
	}
</style>
